<template>
	<view>
		<view class="header status_bar bgColor04" v-if="currentIndex == 0">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="logo">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="header status_bar bgColor05" v-if="currentIndex == 1">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="logo">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="header status_bar bgColor06" v-if="currentIndex == 2">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="logo">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		
		<block v-for="(item,index) in note_list" :key="index" >
			<view @click.stop="$r('/pages/public/art_detail?id='+item.id)" class="announcement"  v-if="ann && currentIndex == index" :class="scrrol == true ? 'bgColor0'+(index+4) : ''">
				<view class="icon iconfont icon-tongzhi"></view>
				<view class="text one_line">{{item.title}}</view>
				<view class="close iconfont icon-guanbi" @tap="closeAnn"></view>
			</view>
		</block>
		
	<!-- 	<view class="announcement" v-if="ann && currentIndex == 1" :class="scrrol == true ? 'bgColor05' : ''">
			<view class="icon iconfont icon-tongzhi"></view>
			<view class="text one_line">欢迎进入土豆好车小程序，于今日正式上线公测!1123</view>
			<view class="close iconfont icon-guanbi" @tap="closeAnn"></view>
		</view>
		
		<view class="announcement" v-if="ann && currentIndex == 2" :class="scrrol == true ? 'bgColor06' : ''">
			<view class="icon iconfont icon-tongzhi"></view>
			<view class="text one_line">欢迎进入土豆好车小程序，于今日正式上线公测!345345</view>
			<view class="close iconfont icon-guanbi" @tap="closeAnn"></view>
		</view> -->
		
		<view class="bg_box">
			<view class="bg01 bgColor01" v-if="currentIndex == 0"></view>
			<view class="bg01 bgColor02" v-if="currentIndex == 1"></view>
			<view class="bg01 bgColor03" v-if="currentIndex == 2"></view>
			<view class="bg_content">
				<view class="clear_box03"></view>

				<view class="banner_box">
					<swiper next-margin="-1px" :circular="true" :current="currentIndex" :autoplay="true"
						:interval="3000" :duration="200" indicator-dots="true" indicator-color="rgba(255, 255, 255, .1)"
						indicator-active-color="#FFFFFF" @change="bannerChange">
						<block v-for="(item, index) in ad_list" :key="index">
							<swiper-item style="height: 100%;">
								<view class="swiper-item" style="height: 100%;">
									<image :src="realUrl(item.ad_code)" mode="scaleToFill"></image>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>

				<view class="stages_box">
					<view class="stages" :data-url="'/pages/index/rent'" @click="gotopage">
						<image src="/static/bg01.png" mode="widthFix"></image>
					</view>
					<view class="stages" :data-url="'/pages/index/points'" @click="gotopage">
						<image src="/static/bg02.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="nav_box">
					<view class="authentication" :data-url="'/pages/personalcenter/standing'" @click="gotopage">
						<view class="icon">
							<image src="/static/bg03.png" mode="widthFix"></image>
						</view>
						<view class="line"></view>
						<view class="text">为了保障您的账户安全，请实名认证</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>
					<view class="banner_box02">
						<swiper :current="currentIndex02" :autoplay="true" :interval="3000" :duration="200"
							:indicator-dots="false" indicator-color="rgba(255, 255, 255, .1)"
							indicator-active-color="#A5ABBB" @change="bannerChange02">
							<block v-for="(item, index) in nav" :key="index">
								<swiper-item style="height: 100%;">
									<view class="swiper-item" style="height: 100%;">
										<view class="layer_box">
											<view class="layer" v-for="(item02, index02) in item.layer" :data-url="item02.url" @click="gotopage02">
												<image :src="item02.icon" mode="widthFix"></image>
												<view class="text">{{item02.name}}</view>
											</view>
										</view>
										
									</view>
								</swiper-item>
							</block>
						</swiper>
						<view class="point_box">
							<block v-for="(item, index) in nav.length">
								<view class="point" :class="currentIndex02 == index ? 'pointColor' : ''" :data-index="index" @tap="setPointValue"></view>
							</block>
						</view>
					</view>
				</view>
				
				<view class="inquire_box">
					<block v-for="(item, index) in inquire">
						<view class="inquire"  @click="to_search(index)">
							<view class="icon">
								<image :src="item.img" mode="widthFix"></image>
							</view>
							<view class="text_box">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.text}}</view>
							</view>
							<view class="arrow iconfont icon-shangjiantou"></view>
						</view>
					</block>
				</view>
				
				<view class="page_title" :data-url="'/pages/premium/premium'" @click="gotopage03">
					<view class="title">精品车</view>
					<view class="arrow iconfont icon-xiangyou1"></view>
				</view>
				
				<view class="goods_box">
					<block v-for="(item, index) in list" :key="item.id">
						<view class="goods" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage">
							<view class="goods_img">
								<image :src="realUrl(item.logo)" mode="scaleToFill"></image>
							</view>
							<view class="title">{{item.title}}</view>
							<view class="text">{{item.reg_time|formatY}}年 / {{item.mileage}}万公里 / {{item.city_name}}</view>
							<view class="tag_box">
							    <block v-for="(tag,idx1) in item.labels.slice(0,3)" :key="idx1">
							    	<view class="tag">
							    		{{tag.title}}
							    	</view>
							    </block>
							</view>
							<view class="num">已租次数 {{item.call}}</view>
						</view>
					</block>
				</view>
				
				<view class="clear_box01"></view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				currentIndex02: 0,
				ad_list : [],
				note_list : [],
				load_type : 'more',
				list : [],
				ann: true,
				page: 1,
				scrrol: false,
				info: '',
				imgdata: [{
						image: '/static/banner01.png',
					},
					{
						image: '/static/banner02.png',
					},
					{
						image: '/static/banner03.png',
					}

				],
				nav: [{
						layer: [
							{
								icon: '/static/menu/menu01.png',
								name: '我的爱车',
								url:'/pages/personalcenter/car/car',
							},
							{
								icon: '/static/menu/menu02.png',
								name: '进度查询',
								url:'/pages/order/order',
							},
							{
								icon: '/static/menu/menu03.png',
								name: '约定履约',
								url:'/pages/personalcenter/appoint/appoint',
							},
							{
								icon: '/static/menu/menu04.png',
								name: '我的账户',
								url:'/pages/personalcenter/bank/bank',
							},
						]
					},
					{
						layer: [
							{
								icon: '/static/menu/menu01.png',
								name: '我的爱车',
								url:'/pages/personalcenter/car/car',
							},
							{
								icon: '/static/menu/menu02.png',
								name: '进度查询',
								url:'/pages/order/order',
							},
							{
								icon: '/static/menu/menu03.png',
								name: '约定履约',
								url:'/pages/personalcenter/appoint',
							},
							{
								icon: '/static/menu/menu04.png',
								name: '我的账户',
								url:'/pages/personalcenter/bank/bank',
							},
						]
					}

				],
				inquire:[
					{
						img:'/static/menu/menu05.png',
						title:'维保记录',
						text:'权威报告',
					},
					{
						img:'/static/menu/menu06.png',
						title:'改表查询',
						text:'快速查询',
					},
					{
						img:'/static/menu/menu07.png',
						title:'车信查询',
						text:'实时查询',
					},
					{
						img:'/static/menu/menu08.png',
						title:'强险查询',
						text:'实时查询',
					}
				]

			}
		},
		onLoad() {
			let that = this;
			this.initData();
			this.loadData();
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			to_search(index){
				//0.维保记录1.改表查询2.车信查询3.交强查询
				let idx = parseInt(index);
				let url = '/pages/record/weibao';
				switch(idx){
					case 0:
					   url = '/pages/record/weibao';
					break;
					case 1:
					   url = '/pages/record/xugai';
					break;
					case 2:
					   url = '/pages/record/chuxian';
					break;
					case 3:
					   url = '/pages/record/shijian';
					break;
			
				};
				 this.$r(url);
			},
			initData(){
				let url = this.site_url + 'api/index/index';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.ad_list = res.data.ad_list;
						this.note_list = res.data.note;		
					}	
				})
			},
			loadData(){
				if (this.load_type == 'loading' || this.load_type == 'no_more') {
					return;
				}
				let url = this.site_url + 'api/index/index_load?page='+this.page;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.page++;
						this.load_type = 'more';
						this.list = [...this.list, ...res.data];
					} else {
						this.load_type = 'no_more';
					}
				
				})
				
			},
			bannerChange(e) {
				let that = this;
				that.currentIndex = e.target.current;
			},
			bannerChange02(e) {
				let that = this;
				that.currentIndex02 = e.target.current;
			},
			setPointValue(e){
				let that = this;
				let index_ = e.currentTarget.dataset.index;
				that.currentIndex02 = index_;
			},
			closeAnn() {
				let that = this;
				that.ann = false;
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				if(url == '/pages/order/order'){
					this.$r(url,'swi');
				}else{
					this.$r(url);
				}
			},
			gotopage03(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url,'swi');
			},

		},

	}
</script>

<style>
	.scrrolHeader{
		background-color: #666 !important;
	}
	.clear_box03 {
		height: calc(13.5vw + var(--status-bar-height));
	}

	.clear_box04 {
		height: calc(12vw);
		;
	}

	.announcement {
		width: 100%;
		height: 12vw;
		padding: 0 4%;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, .1);
		position: fixed;
		left: 0;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 99;
		display: flex;
		align-items: center;
	}

	.announcement .icon {
		font-size: 4.5vw;
		color: #fff;
		margin-right: 3vw;
	}

	.announcement .text {
		font-size: 3.2vw;
		color: #fff;
		margin-right: 2vw;
		flex: 1;
	}

	.announcement .close {
		font-size: 3vw;
		color: #fff;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		height: 66.666vh;
		background: linear-gradient(to bottom, rgba(252, 93, 32, 1), rgba(252, 93, 32, 1), rgba(252, 93, 92, 0));
	}

	.bgColor01 {
		background: linear-gradient(to bottom, rgba(252, 93, 32, 1), rgba(252, 93, 32, 1), rgba(252, 93, 92, 0)) !important;
	}

	.bgColor02 {
		background: linear-gradient(to bottom, rgba(0, 105, 255, 1), rgba(0, 105, 255, 1), rgba(0, 105, 255, 0)) !important;
	}

	.bgColor03 {
		background: linear-gradient(to bottom, rgba(228, 37, 37, 1), rgba(228, 37, 37, 1), rgba(228, 37, 37, 0)) !important;
	}
	
	.bgColor04 {
		background: rgba(252, 93, 32, 1) !important;
	}
	
	.bgColor05 {
		background: rgba(0, 105, 255, 1) !important;
	}
	
	.bgColor06 {
		background: rgba(228, 37, 37, 1) !important;
	}

	.bg_box .bg_content {
		width: 92%;
		height: 100%;
		position: absolute;
		left: calc(50% - 46%);
		top: 0;
		z-index: 98;
	}

	.banner_box {
		width: 100%;
		height: 50vw;
	}

	.banner_box swiper {
		width: 100%;
		height: 100%;
	}

	.banner_box swiper image {
		width: 100%;
		height: 100%;
	}

	.banner_box02 {
		width: 100%;
		height: 30vw;
		background-color: #fff;
		border-radius: 3vw;
		padding: 6vw 0;
	}

	.banner_box02 swiper {
		width: 100%;
		height: 100%;
	}
	
	.banner_box02 .layer_box{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.banner_box02 .layer_box .layer{
		width: 25%;
	}

	.banner_box02 swiper image {
		width: 45%;
		margin: 0 auto;
	}

	.banner_box02 swiper .text {
		width: 100%;
		text-align: center;
		font-size: 3.5vw;
		color: #333;
		margin-top: 1vw;
	}

	.point_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1vw;
	}

	.point_box .point {
		width: 2.5vw;
		height: 1.2vw;
		background-color: #DFE3EE;
		margin-left: 1vw;
		transition: 0.3s;
	}

	.point_box .point:nth-child(1) {
		margin-left: 0;
	}
	
	.pointColor{
		background-color: #A5ABBB !important;
		width: 3.5vw !important;
	}

	.stages_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.stages_box .stages {
		flex: 1;
	}

	.stages_box .stages:nth-child(1) {
		margin-right: 4%;
	}

	.stages_box .stages image {
		width: 100%;
	}

	.nav_box {
		width: 100%;
		border-radius: 3vw;
		background: linear-gradient(to right, rgba(249, 223, 200, 1), rgba(252, 247, 241, 1));
		margin-top: 4%;
	}

	.nav_box .authentication {
		height: 13.5vw;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 4vw;
	}

	.nav_box .authentication .icon {
		width: 16vw;
	}

	.nav_box .authentication .icon image {
		width: 100%;
	}

	.nav_box .authentication .line {
		width: 2px;
		height: 4vw;
		background-color: #D9AF89;
		margin: 0 3vw;
	}

	.nav_box .authentication .text {
		flex: 1;
		font-size: 3.3vw;
		color: #070707;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-right: 1vw;
	}

	.nav_box .authentication .arrow {
		font-size: 3.8vw;
		color: #CFCFCF;
	}
	
	.inquire_box{
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 4%;
		border-radius: 3vw;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.inquire_box::after {
		flex: auto;
		content: '';
	}
	
	.inquire_box .inquire{
		width: 48%;
		margin-left: 4%;
		display: flex;
		padding: 4% 0;
	}
	
	.inquire_box .inquire:nth-child(2n + 1){
		margin-left: 0;
	}
	
	.inquire_box .inquire .icon{
		width: 7vw;
		margin-right: 2vw;
	}
	
	.inquire_box .inquire .icon image{
		width: 100%;
	}
	
	.inquire_box .inquire .text_box{
		flex: 1;
	}
	
	.inquire_box .inquire .text_box .title{
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
	}
	
	.inquire_box .inquire .text_box .text{
		font-size: 3.4vw;
		color: #999999;
		margin-top: 2vw;
	}
	
	.inquire_box .inquire .arrow{
		font-size: 3vw;
		color: #C4C7CE;
		margin-top: 1.5vw;
	}
	
	.page_title{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.page_title .title{
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}
	
	.page_title .arrow{
		font-size: 4vw;
		color: #999;
	}
	
	.goods_box{
		width: 100%;
		margin-top: 4%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.goods_box::after {
		flex: auto;
		content: '';
	}
	
	.goods_box .goods{
		width: 48%;
		margin-left: 4%;
		padding: 3vw;
		background-color: #fff;
		border-radius: 3vw;
		margin-bottom: 4%;
	}
	
	.goods_box .goods:nth-child(2n + 1){
		margin-left: 0;
	}
	
	.goods_box .goods .goods_img{
		width: 100%;
		height: 36vw;
	}
	
	.goods_box .goods .goods_img image{
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.goods_box .goods .title{
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 2vw;
	}
	
	.goods_box .goods .text{
		font-size: 3vw;
		color: #979AA9;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-top: 0.5vw;
	}
	
	.goods_box .goods .tag_box{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1vw;
	}
	
	.goods_box .goods .tag_box .tag{
		min-width: 10vw;
		height: 4vw;
		line-height: 4vw;
		padding: 0 1.5vw;
		border-radius: 1vw;
		font-size: 2.3vw;
		margin-left: 1vw;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(1){
		margin-left: 0;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(1){
		background-color: #FDF1C2;
		color: #BC8519;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(2){
		background-color: #FEEFEC;
		color: #DB2114;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(3){
		background-color: #F7F8FD;
		color: #222222;
	}
	
	.goods_box .goods .num{
		margin-top: 1vw;
		font-size: 3vw;
		color: #979AA9;
	}
</style>